﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery伪分页效果静态页面实现分页(原创)</title>
<script src="../js/jquery.min.js"></script>
<style>
 body {
	overflow-x:hidden;
	margin:0 auto;
}
.main {
	width:800px;
	zoom:1;
	margin:0 auto;
}
.item {
	width:800px;
	overflow:hidden;
}
ul {
	padding:0;
	width:40%;
	zoom:1;
	margin:0 10px;
}
.clear {
	zoom:1;
}
.clear:after {
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}
ul li {
	list-style-type:none;
	float:left;
	background:#F69;
	font-size:60px;
	text-shadow:1px 1px 3px #555;
	width:37%;
	height:30%;
	margin:10px 10px 10px 30px;
	text-align:center;
	color:#fff;
}
.page_btn {
	padding-top:20px;
	margin:0 5.8rem;
}
.page_btn a {
	cursor:pointer;
	padding:5px;
	border:solid 1px #ccc;
	font-size:16px;
}
.page_box {
	float:left;
	margin-right:15px;
}
.num {
	padding:0 10px;
	font-size:16px;
}
</style>
</head>
<body>
<div class="main">
    <div class="item">
        <ul class="clear">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
            <li>13</li>
            <li>14</li>
            <li>15</li>
            <li>16</li>
            <li>17</li>
            <li>18</li>
            <li>19</li>
            <li>20</li>
            <li>21</li>
            <li>22</li>
            <li>23</li>
            <li>24</li>
            <li>25</li>
            <li>26</li>
            <li>27</li>
            <li>28</li>
        </ul>
    </div>
    <div class="page_btn clear">
        <span class="page_box">
                <a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:0 3px;">/</span><span class="total"></span></span><a class="next">下一页</a>
        </span>
    </div>
</div>

<script>
$(document).ready(function() {
    $("ul li:gt(3)").hide(); //初始化，前面4条数据显示，其他的数据隐藏。
    var total_q = $("ul li").index() + 1; //总数据
    var current_page = 4; //每页显示的数据
    var current_num = 1; //当前页数
    var total_page = Math.round(total_q / current_page); //总页数
    var next = $(".next"); //下一页
    var prev = $(".prev"); //上一页
    $(".total").text(total_page); //显示总页数
    $(".current_page").text(current_num); //当前的页数

    //下一页
    $(".next").click(function() {
        if (current_num == 7) {
            return false; //如果大于总页数就禁用下一页
        } else {
            $(".current_page").text(++current_num); //点击下一页的时候当前页数的值就加1
            $.each($('ul li'), function(index, item) {
                var start = current_page * (current_num - 1); //起始范围
                var end = current_page * current_num; //结束范围
                if (index >= start && index < end) { //如果索引值是在start和end之间的元素就显示，否则就隐
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }
    });
    //上一页方法
    $(".prev").click(function() {
        if (current_num == 1) {
            return false;
        } else {
            $(".current_page").text(--current_num);
            $.each($('ul li'), function(index, item) {
                var start = current_page * (current_num - 1); //起始范围
                var end = current_page * current_num; //结束范围
                if (index >= start && index < end) { //如果索引值是在start和end之间的元素就显示，否则就隐藏
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
        }

    })
})
</script>

</body>
</html>
